<template>
  <div class="add_site">
       <h4>站点管理>{{siteTips}}站点1111</h4>
        <div class="container" style="padding:0;">
          <div class="baseInfo">
               <h4 style="margin-bottom:20px;">{{siteTips}}养殖基地信息</h4>
               <el-form :model="siteInfo" ref="siteInfo" :rules="rules" label-width="160px">
                    <el-form-item prop="siteName" label="站点名称:">
                        <el-input class="input-item" v-model="siteInfo.siteName" auto-complete="on"></el-input>
                    </el-form-item>
                    <el-form-item prop="siteLinkMan" label="站点联系人:">
                        <el-input class="input-item" v-model="siteInfo.siteLinkMan" auto-complete="on"></el-input>
                    </el-form-item>
                    <el-form-item prop="siteTel" label="站点联系方式:">
                        <el-input class="input-item" v-model="siteInfo.siteTel" auto-complete="on"></el-input>
                    </el-form-item>
                    <el-form-item prop="openTime" label="开放时间">
                           <el-time-picker
                                        is-range
                                        v-model="siteInfo.openTime"
                                        range-separator="至"
                                        start-placeholder="开始时间"
                                        end-placeholder="结束时间"
                                        placeholder="选择时间范围"
                                        value-format="HH:mm:ss">
                            </el-time-picker>
                    </el-form-item>
                    <el-form-item prop="siteBelong" label="所属养殖基地:">
                         <el-select v-model="siteInfo.siteBelong" placeholder="请选择活动区域" style="width:488px;">
                                <el-option v-for="item in baseBelongSelect" 
                                           :key="item.id"  
                                           :label="item.baseName"  
                                           :value="item.id"></el-option>
                         </el-select>
                    </el-form-item>
                    <el-form-item prop="selected" label="地区:">
                         <area-select :level="2" v-model="siteInfo.selected" :data="$pcaa" ></area-select> 
                     </el-form-item>   
                     <el-form-item prop="address" label="详细地址:">
                        <el-input class="input-item" v-model="siteInfo.address" auto-complete="on"></el-input>
                    </el-form-item>
                    <el-form-item  >
                        <el-button type="info" @click="cancel()">取消</el-button> 
                         <el-button type="primary" style="margin-left: 20px;" @click="saveForm('siteInfo')" v-if="isShow">保存</el-button>
                    </el-form-item>
              </el-form>
              
           </div>   
           
            <!-- 站点详情 站点统计 -->
            <div class="siteCount" v-if="isCount">
                <h4>站点统计</h4>
                <div>
                    <el-date-picker
                        v-model="value1"
                        type="month"
                        value-format="yyyy-MM"
                        placeholder="选择日期"
                        style="margin:20px;">
                    </el-date-picker>
                    <el-button type="primary"  @click="searchA()">搜索</el-button>
                </div>
                <div class="info">
                        <div>处理订单：{{siteOrderNum}} 笔</div>
                        <div>实际交易额： ￥{{siteTurnover}}</div>
                        <div>总数量：{{siteCaseNum}} 箱</div>
                        <div>总重量：{{siteRealWeight}} 斤</div>
                </div>
            </div>
       </div>
  </div>
</template>

<script>
import { farmer_base,addSite,siteDetail,editSite,siteCount } from '@/request/api'
export default {
    data(){
        var checkBlank = (rule, value, callback) => {
            if (/(^\s+)|(\s+$)|\s+/g.test(value)) {
                callback(new Error('请不要输入空格'));
            }else {
                callback()
            } 
        };
        return {
            siteTips:'',
            siteInfo:{
               siteName:'',  // 站点名称
               siteLinkMan:'', // 站点联系人
               siteTel:'',   // 站点联系方式
               siteBelong:'', // 站点所属基地
               selected:[], // 省市区
               address:'', // 详细地址
               openTime:'', // 站点开放时间
            },
            baseBelongSelect:[], // 所属基地下拉框
            rules:{
                siteName: [
                    { required: true, message: '站点名称不能为空', trigger: 'blur' },
                    { validator: checkBlank, trigger: 'blur' }
                ],
                siteLinkMan: [
                    { required: true, message: '站点联系人不能为空', trigger: 'change' },
                     { validator: checkBlank, trigger: 'blur' }
                ],
                siteTel: [
                    {  required: true, message: '站点联系方式不能为空', trigger: 'change' },
                    { pattern:/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57]|19[89])[0-9]{8}$/, message: '手机号格式不对', trigger: 'blur'}
                  
                ],
                siteBelong: [
                    { required: true, message: '所属养殖基地不能为空', trigger: 'change' },
                ],
                address: [
                    { required: true, message: '站点名称不能为空', trigger: 'blur' },
                     { validator: checkBlank, trigger: 'blur' }
                ],
                selected: [
                    { required: true, message: '地区不能为空', trigger: 'change' }
                ],
                openTime:[
                     { required: true, message: '开放时间不能为空', trigger: 'change' }
                ]
                 
            },
            isShow:true,
            isCount:false,
            value1:'',
            siteCaseNum:'', // 总数量 
            siteTurnover:'',// 实际交易额
            siteRealWeight:'',// 总重量
            siteOrderNum:''//  处理订单 
        }
    },
    created(){
        let path  = this.$route.path;
        var myDate = new Date();
        var year =   myDate.getFullYear(); //获取完整的年份(4位,1970)
        var month =  myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
        if(month < 10) {
            var monthStr = '0'+ month;
        }
        var str = year + '-'+monthStr;
        this.value1 = str;
        if(path == '/site/add_site') {
            // 新增页面 
            this.siteTips = '添加'
            this.isShow = true;  // 显示按钮 
             this.isCount = false; // 站点统计
        }else if(path.indexOf('/site/edit_site') != -1) {
            // 编辑页面 
             this.siteTips = '编辑'
             let id = this.$route.params.id;
             this.get_siteDetail(id);
             this.isShow = true; // 显示按钮 
              this.isCount = false; // 站点统计
        }else if(path.indexOf('/site/detail_site') != -1) {
            //  详情页面 
             this.siteTips = '详情';
             let id = this.$route.params.id;
             this.get_siteDetail(id);
             this.isShow = false; // 隐藏按钮 
             this.isCount = true;
        }
        this.getbaseBelong();
    },
    mounted(){
        this.get_siteCount();
    },
    methods:{
        searchA(){
            this.get_siteCount();
        },
        saveForm(formName){
            this.$refs[formName].validate((valid) => {
                if(valid){
                     this.saveAddSite();
                }
            })
        },
        cancel(){
            this.$router.go(-1);
        },
        getbaseBelong(){
           farmer_base({}).then(res=> {
               this.baseBelongSelect = res.data;
          })
        },
        saveAddSite(){
            let path  = this.$route.path;
            if(path == '/site/add_site') {
                // 新增页面 
                addSite({
                    siteName:this.siteInfo.siteName,
                    linkMan:this.siteInfo.siteLinkMan,
                    tel:this.siteInfo.siteTel,
                    belongBase:this.siteInfo.siteBelong,
                    provinceId:this.siteInfo.selected[0],
                    cityId:this.siteInfo.selected[1],
                    districtId:this.siteInfo.selected[2],
                    address:this.siteInfo.address,
                    openTime:this.siteInfo.openTime.join('-')
                }).then( res => {
                    if(res.code == 1){
                        this.$message.success('保存成功');
                        this.$router.go(-1);
                    }
                })
            }else if(path.indexOf('/site/edit_site') != -1) {
                // 编辑页面 
                editSite({
                    id:this.$route.params.id,
                    siteName:this.siteInfo.siteName,
                    linkMan:this.siteInfo.siteLinkMan,
                    tel:this.siteInfo.siteTel,
                    belongBase:this.siteInfo.siteBelong,
                    provinceId:this.siteInfo.selected[0],
                    cityId:this.siteInfo.selected[1],
                    districtId:this.siteInfo.selected[2],
                    address:this.siteInfo.address,
                    openTime:this.siteInfo.openTime.join('-')
                }).then(res => {
                      if(res.code == 1){
                            this.$message.success('编辑成功');
                            this.$router.go(-1);
                      }
                })
               
            }
        },
        get_siteDetail(id){
            // 获取站点详情数据
             siteDetail({
                id
             }).then(res => {
                  console.log(res);
                  this.siteInfo.openTime = res.siteInfo.openTime.split('-');
                  this.siteInfo.siteName = res.siteInfo.siteName;
                  this.siteInfo.siteLinkMan = res.siteInfo.linkMan;
                  this.siteInfo.siteTel = res.siteInfo.tel;
                  this.siteInfo.siteBelong = res.siteInfo.belongBase;
                  this.siteInfo.selected = [res.siteInfo.provinceId.toString(),res.siteInfo.cityId.toString(),res.siteInfo.districtId.toString() ]
                  this.siteInfo.address = res.siteInfo.address;
             })
        },
        get_siteCount(){
            siteCount({
                id:this.$route.params.id,
                date:this.value1
            }).then(res => {
                 console.log(res);
                 this.siteCaseNum = res.siteCaseNum;
                 this.siteTurnover = res.siteTurnover;
                 this.siteRealWeight = res.siteRealWeight;
                 this.siteOrderNum = res.siteOrderNum;
            })
        }
    }
 }
</script>
<style  scoped>
.add_site> h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}
.container {
    line-height:50px;
    border-radius: 0;
}
.container h4 {
    background-color: #eee;
    line-height: 50px;
    font-weight: 400;
    font-size:16px;
    padding-left:30px;
    color: #999;

}
.input-item {
    width: 488px;
}
.container .info {
    display: flex;
    padding: 0  50px;
}
.container .info div {
    width: 360px;
    
}
</style>